<template>
  <SearchTable :tableAllData="table.tableData" :column="table.column" v-loading="loading"></SearchTable>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {ref,watch} from "vue";
import {useRoute} from "vue-router";
import api from "@/api/api";
import SearchTable from "@/components/table/SearchTable";

export default {
  name: "search_page",
  components: {SearchTable},
  setup(){
    const route = useRoute()
    const data = reactive({
      table: {
        tableData: ref([]),
        column: ref([{}])
      },
      loading: ref(true)
    })
    const [seacrh,searchType] = [route.query.search,route.query.searchType]
    const getList = (search,searchType) => {
      if (searchType === 'snv'){
        api.Search.getHomeSNV(search).then(res => {
          data.table.column = [
            {name: 'Index SNV',value:'idInDbsnp',href:true},
            {name: 'Chr',value:'chr',href:false},
            {name: 'CpG pos',value:'cpgPos',href:false},
            {name: 'p-value',value:'pValue',href:false},
            {name: 'q-value',value:'qValue',href:false},
            {name: 'Sample',value:'sample',href:false},
            {name: 'Tissue',value:'sampleInfo.tissue',href:false},
            {name: 'Health status',value:'sampleInfo.healthStatus',href:false},
          ]
          data.table.tableData = [{idInDbsnp:'',snpPos:'',cpgPos:'',pValue:'',sample:'',sampleInfo:{tissue:'',sampleType:''}}]
          data.table.tableData = res.data
          data.loading = false
        })
      }else if (searchType === 'single'){

      }else if (searchType === 'genonmic_region'){
        api.Search.getHomeGenonmic(search).then(res => {
          data.table.column = [
            {name: 'Index SNV',value:'idInDbsnp',href:true},
            {name: 'SNV pos',value:'snpPos',href:false},
            {name: 'CpG pos',value:'cpgPos',href:false},
            {name: 'P-value',value:'pValue',href:false},
            {name: 'Sample',value:'sample',href:false},
            {name: 'Tissue',value:'sampleInfo.tissue',href:false},
            {name: 'Health status',value:'sampleInfo.healthStatus',href:false},
          ]
          data.table.tableData = [{idInDbsnp:'',snpPos:'',cpgPos:'',pValue:'',sample:'',sampleInfo:{tissue:'',sampleType:''}}]
          data.table.tableData = res.data
          data.loading = false
        })
      }else if (searchType === 'gene'){
        api.Search.getHomeGene(search).then(res => {
          data.table.column = [
            {name: 'Index SNV',value:'idInDbsnp',href:true},
            {name: 'SNV pos',value:'snpPos',href:false},
            {name: 'CpG pos',value:'cpgPos',href:false},
            {name: 'P-value',value:'pValue',href:false},
            {name: 'Sample',value:'sample',href:false},
            {name: 'Tissue',value:'sampleInfo.tissue',href:false},
            {name: 'Health status',value:'sampleInfo.healthStatus',href:false},
          ]
          data.table.tableData = [{idInDbsnp:'',snpPos:'',cpgPos:'',pValue:'',sample:'',sampleInfo:{tissue:'',sampleType:''}}]
          data.table.tableData = res.data
          data.loading = false
        })
      }
    }

    watch(()=>data.table.tableData,(value) => {
      data.table.tableData = value
      console.log('Search tableData==>',value)
    })
    watch(()=>data.table.column,(value) => {
      data.table.column = value
    })
    watch(()=>data.loading,(value) => {
      data.loading = value
    })
    getList(seacrh,searchType)
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style scoped>

</style>
